{% extends "base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-datetimepicker.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}">
{% endblock %}
{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li id="nav_operation_log">
                    <a href="{{ url_for('safe.operation_record') }}">操作日志</a>
                </li>
                <li id="nav_reset_password">
                    <a href="{{ url_for('safe.def_password') }}">修改默认密码</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            {% for message in get_flashed_messages() %}
            <div class="alert alert-warning">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ message }}
            </div>
            {% endfor %}

            {% block page_content %}
            <div class="col-md-12">
                <div class="col-md-1" style="margin-top:3px;">
                    <select class="select2" id="search_type" >
                        <option value='5'>选择条件</option>
                        <option value='0'>按工码</option>
                        <option value='1'>按操作人</option>
                        <option value='2'>按操作内容</option>
                        <option value='3'>按时间</option>
                        <option value='4'>联合搜索</option>
                    </select>
                </div>
                <div id="by_id" class="col-md-2" style="display:none;">
                        <input id="number" style="height:36px;width:95%;" type="text" placeholder="输入完整工码">
                </div>
                <div id="by_sbm" class="col-md-2" style="display:none;margin-top:3px;" >
                    <input id="name" style="height:36px;width:95%;" type="text" placeholder="">
                </div>
                <div id="by_time" class="col-md-3" style="display:none;" >
                    <div class="col-md-5">
                        <input type="text" id="start" style="height:36px;width:99%;" readonly required>
                    </div>
                    <div class="col-md-1" style="margin-right:15px;margin-top:8px;font-size:15px;">至</center></div>
                    <div class="col-md-5">
                        <input type="text" id="end" style="height:36px;width:99%;" readonly required>
                    </div>
                </div>
                <div id="by_area" class="col-md-2" style="display:none;" >
                    <input id="operation" style="height:36px;width:95%;" type="text" placeholder="操作内容">
                </div>
                <div id="buttons" class="col-md-2" style="display:none;" >
                    <button class="btn btn-info" onclick="search()" >&nbsp查询&nbsp</button>
                    <button class="btn btn-warning" onclick="reset()" >&nbsp重置&nbsp</button>
                </div>
                <input id="tb_name" type="hidden">
            </div>
            {% endblock %}
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-datetimepicker.zh-CN.js') }}" charset="UTF-8"></script>
<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>



<script>

var by_id = document.getElementById('by_id');
var by_sbm = document.getElementById('by_sbm');
var by_area = document.getElementById('by_area');
var by_time = document.getElementById('by_time');
var by_combine = document.getElementById('combine');
var buttons = document.getElementById('buttons');

var GetToday = function(){

    var today = new Date();
    var month = today.getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    var day = today.getDate();
    day = day < 10 ? '0' + day : day;
    var value = today.getFullYear() + '-' + month + '-' + day ;
    return value;
}
$(document).ready(function(){
    
    $(".select2").select2({
        minimumResultsForSearch: Infinity,
    });

    var value = GetToday();
    $('#start').datetimepicker({
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        autoclose: true,
        minView: 2,
    });
    
    $('#end').datetimepicker({
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        autoclose: true,
        minView: 2,
    });

    $('#start').datetimepicker('setEndDate', value);
    $('#end').datetimepicker('setEndDate', value);

    document.getElementById('start').value = value;
    document.getElementById('end').value = value;

    $('#search_type').on('select2:selecting', function(e){
        var value = e.params.args.data.id;
        if(value==='5'){
            by_id.style.display = 'none';
            by_sbm.style.display = 'none';
            by_area.style.display = 'none';
            by_time.style.display = 'none';
            buttons.style.display = 'none';
        }
        else if(value==='4'){
            by_id.style.display = 'none';
            by_sbm.style.display = '';
            by_area.style.display = '';
            by_time.style.display = '';
            buttons.style.display = '';
        }
        else{
            by_id.style.display = 'none';
            by_sbm.style.display = 'none';
            by_area.style.display = 'none';
            by_time.style.display = 'none';
            buttons.style.display = '';
            if(value==='0'){
                by_id.style.display = '';
            }
            else if(value==='1'){
                by_sbm.style.display = '';
            }
            else if(value==='2'){
                by_area.style.display = '';
            }
            else if(value==='3'){
                by_time.style.display = '';
            }
        }
    })
    $('#search_type').select2('val', '5');
});

var reset = function(){

    $('#search_type').select2('val', '5');
    by_id.style.display = 'none';
    by_sbm.style.display = 'none';
    by_area.style.display = 'none';
    by_time.style.display = 'none';
    buttons.style.display = 'none';
    search();
}

</script>

{% endblock %}
